<template>
  <div class="search-popup">
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeholder"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <!-- 父传子三部曲 第一步 -->
    <HistoryHot
      v-if="blockShow == 1"
      :searchHistoryData="searchHistoryData"
      :searchHotData="searchHotData"
      @tagClick='tagClick'
    ></HistoryHot>

    <SearchTipList
      v-else-if="blockShow == 2"
      :searchTipsArr="searchTipsArr"
      @cellClick='tagClick'
    ></SearchTipList>

    <SearchProducts
      v-else
      :GoodLists="GoodLists"
      :filterCategory="filterCategory"
      @categoryChange='categoryChange'
      @priceChange='priceChange'
    ></SearchProducts>
  </div>
</template>

<script>
import HistoryHot from "@/components/HistoryHot";
import SearchTipList from "@/components/SearchTipList";
import SearchProducts from "@/components/SearchProducts";

import {
  GetPopupData,
  GetSearchTipsListData,
  GetGoodsListData,
} from "@/request/api";
export default {
  data() {
    return {
      searchVal: "", //用户输入的文字
      placeholder: "", //文本占位符
      blockShow: 1, //状态flag 1为历史记录、热门搜索 2为展示搜索提示列表 3为搜索产品的内容
      searchHistoryData: [], //历史数据
      searchHotData: [], //热门数据
      searchTipsArr: [],
      GoodLists: [],
      filterCategory: [], //搜索产品内容的分类数据
      order: "desc", //价格排序
      categoryId: 0, //分类id
      sort: "price", //默认的搜索方式
    };
  },
  created() {
    GetPopupData().then((res) => {
      this.placeholder = res.data.defaultKeyword.keyword;
      this.searchHistoryData = res.data.historyKeywordList;
      this.searchHotData = res.data.hotKeywordList;
    });
  },
  methods: {
    onSearch(val) {
      this.blockShow = 3;
      GetGoodsListData({
        keyword: val,
        page: 1,
        size: 20,
        order: this.order, //价格排序
        categoryId: this.categoryId, //分类id
        sort: this.sort, //默认的搜索方式
      }).then((res) => {
        this.GoodLists = res.data.data;
        let newArr = JSON.parse(
          JSON.stringify(res.data.filterCategory)
            .replace(/name/g, "text")
            .replace(/id/g, "value")
        );
        this.filterCategory = newArr;
      });
    },
   onCancel() {
    this.$router.go(-1);
    this.$store.commit("changeIsShowPopupShadow", false);
},
    onInput(val) {
      GetSearchTipsListData({ keyword: val }).then((res) => {
        (this.blockShow = 2), console.log(res.data);
        this.searchTipsArr = res.data;
      });
    },
    categoryChange(value){
      this.categoryId = value;
      this.onSearch(this.searchVal)
    },
    priceChange(value){
      this.order = value;
      this.onSearch(this.searchVal)
    },
    tagClick(value){
      this.searchVal = value
      this.onSearch(value)

    }
  },
  components: {
    HistoryHot,
    SearchTipList,
    SearchProducts,
  },
};
</script>
 
<style lang = "less">
.search-popup {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #efefef;
  z-index: 100;
}
</style>